<template>
  <table border="1" v-cell-select="weekdayTimeData">
    <tr>
      <th rowspan="2">星期 / 时间</th>
      <th colspan="12">00:00 - 12:00</th>
      <th colspan="12">12:00 - 23:59</th>
    </tr>
    <tr>
      <th v-for="n in 24" :key="n">{{ n - 1 }}</th>
    </tr>
    <tr v-for="n in 7" :key="n" :data-weekday="n - 1">
      <th class="weekday-title">{{ weekdayTitle[n - 1] }}</th>
      <template v-for="m in 24" :key="m">
        <td :data-time="m - 1" :data-weekday="n - 1" :data-rtext="weekdayTitle[n - 1]" :data-ctext="m - 1">
          {{ weekdayTimeData[`${n - 1}_${m - 1}`] }}
        </td>
      </template>
    </tr>
  </table>
</template>

<script setup>
import { reactive } from 'vue'
import vCellSelect from './directives/cellSelect'
const weekdayTimeData = reactive({})
const weekdayTitle = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;

  tr {
    height: 50px;
  }

  .weekday-title {
    width: 100px;
  }

  td {
    width: 50px;
    color: #fff;

    &.target {
      background-color: #3737e2;
    }
  }
}
</style>
